<template>
  <div class="app-container">
    总数：{{total}}
    <div style="margin-top: 10px"></div>
    <el-row :gutter="20">
      <el-col :span="90"><div class="grid-content bg-purple">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="任务名称" prop="name">
            <el-input
              v-model="queryParams.name"
              placeholder="请输入任务名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="车牌号码" prop="licensePlate">
            <el-input
              v-model="queryParams.licensePlate"
              placeholder="请输入车牌号码"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="创建时间" prop="createTime">
            <el-date-picker
              v-model="queryParams.createTime"
              type="datetime"
              placeholder="选择创建时间"
              align="right"
              value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="布防状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="请选择布防状态">
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.text"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            <el-button
              @click="handleAddwe"
              icon="el-icon-search"
              type="primary">
              高级检索
            </el-button>
          </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              v-hasPermi="['community:population:export']"
            >导出</el-button>
            <el-button @click="handleAdd" icon="el-icon-circle-plus-outline" type="primary"
                       style="float: right; margin-left: 130px;">新增布控</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <br>
        <div class="sort-container">
          共<span class="total-style">{{ this.total }}</span>条消息
          排序：<span style="color: blue;">时间</span>
          <div class="sort-buttons">
            <el-button
              icon="el-icon-caret-top"
              @click="sortAsc('asc')">
            </el-button>
            <el-button
              icon="el-icon-caret-bottom"
              @click="sortDesc('desc')">
            </el-button>
          </div>
        </div>

        <div id="box">
          <ul class="population-list">
            <li v-for="(v, index) in vehiclesList" :key="index" class="product-item">
              <div class="product-content2 light-gray-bg">
                <input type="checkbox"  v-model="selectedItems" :value="v.id" class="checkbox-item" @change="handleSelectionChange(v.id)" />
                <div class="delete-button" @click="handleDelete(v.id)">
                  <i class="el-icon-close"></i> <!-- 使用Element UI的图标 -->
                </div>
                <div class="status-label" v-if="v.status">
                  <span v-if="v.status === 0" class="status-circle">全部</span>
                  <span v-if="v.status === 1" class="status-circle">未开始</span>
                  <span v-if="v.status === 2" class="status-circle">执行中</span>
                  <span v-if="v.status === 3" class="status-circle">已暂停</span>
                  <span v-if="v.status === 4" class="status-circle">已结束</span>
                  <span v-if="v.status === 5" class="status-circle">已撤销</span>
                  <span v-if="v.status === 6" class="status-circle">暂停中</span>
                </div>
                <div class="info">
                  <h4>{{ v.name }}</h4>
                  <div class="inline-block-wrapper">
                    <h4>布控人：{{v.userId}}</h4> &nbsp;
                    <h4>布防状态：
                      <span v-if="v.status === 0">全部</span>
                      <span v-if="v.status === 1">未开始</span>
                      <span v-if="v.status === 2">执行中</span>
                      <span v-if="v.status === 3">已暂停</span>
                      <span v-if="v.status === 4">已结束</span>
                      <span v-if="v.status === 5">已撤销</span>
                      <span v-if="v.status === 6">暂停中</span>
                    </h4>
                  </div>
                  <h4>有效期限：{{ v.startTime }} - {{ v.endTime }}</h4>
                  <h4>布防车牌：{{ v.licensePlate }}</h4>
                  <h4>告警次数：{{ v.alarmNum }}</h4>
                  <h4>创建时间：{{ v.createTime }}</h4>
                </div>
                <!-- 操作按钮容器，初始为隐藏 -->
                <div class="action-box">
                  <el-button size="mini" @click="viewDetails(v)">详情</el-button>
                  <el-button size="mini" @click="edit(v)">编辑</el-button>
                  <el-button size="mini" :disabled="v.status === 4" type="danger" @click="stop(v)">结束</el-button>
                  <el-button size="mini" :disabled="v.status === 6" type="danger" @click="suspend(v)">暂停</el-button>
                  <el-button size="mini" :disabled="v.status === 2" type="danger" @click="start(v)">开始</el-button>
                  <el-button size="mini" :disabled="v.status === 5" @click="withdraw(v.id)">撤控</el-button>
                  <el-button size="mini" @click="alertLog">告警记录</el-button>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div></el-col>
    </el-row>
    <!-- 添加到适当的位置，例如在<template>的顶部或底部 -->
    <el-dialog
      title="高级检索"
      :visible.sync="dialogVisible"
      width="30%">
      <!-- 弹窗内容 -->
      <div>
        <p>布防状态:
          <el-tag>全部</el-tag>
          <el-tag>未开始</el-tag>
          <el-tag>执行中</el-tag>
          <el-tag>已暂停</el-tag>
          <el-tag>已结束</el-tag>
          <el-tag>已撤控</el-tag>
        </p>
        <p>创建时间:
          <el-tag>全部</el-tag>
          <el-tag>近一天</el-tag>
          <el-tag>近一周</el-tag>
          <el-tag>近一个月</el-tag>
          <el-tag>自定义</el-tag>
        </p>
        <!-- 创建时间的输入框或选择器，根据需求添加 -->
      </div>
      <!-- 弹窗底部的操作按钮，如确认和取消 -->
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirmSearch">确 定</el-button>
  </span>
    </el-dialog>
    <!--车辆一键布控的对话框-->
    <el-dialog title="车辆一键布控" :visible.sync="vehiclesFormVisible" width="60%">
      <el-form ref="form" :model="form" label-width="100px">
        <!-- 第一行：布防名称和布防时间 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="布防名称" prop="name" required>
              <template slot="label">
                <span class="required-label"></span>
                <span>布防名称</span>
              </template>
              <el-input v-model="form.name" placeholder="请输入任务名称" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- 开始时间 -->
            <el-form-item prop="startTime" required>
              <template slot="label">
                <span class="required-label"></span>
                <span>布控时间</span>
              </template>
              <el-date-picker
                v-model="form.startTime"
                type="datetime"
                placeholder="选择开始时间"
                align="right"
                value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>-
              <el-date-picker
                v-model="form.endTime"
                type="datetime"
                placeholder="选择结束时间"
                align="right"
                value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第二行：布防车牌和任务类型 -->
        <el-row>
          <el-col :span="12">
            <el-form-item prop="licensePlate" label="布防车牌" required>
              <template slot="label">
                <span class="required-label"></span>
                <span>布防车牌</span>
              </template>
              <el-input v-model="form.licensePlate" placeholder="布防车牌号" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务类型" prop="type">
              <el-radio v-model="form.taskType" label="1">个人所有</el-radio>
              <el-radio v-model="form.taskType" label="0">社区所有</el-radio>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第三行：备注 -->
        <el-form-item label="备注" prop="desc">
          <el-input type="textarea" placeholder="请输入内容，长度不超过250个字符" v-model="form.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="vehiclesFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="vehiclestForm">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import { deployVehicles,getMigration,deployUpdate,updateStatus,stop,start,deployDelete,suspend} from '@/api/community/vehicles'
export default {
  //import引入的组件需要注入到对象中才能使用"
  components: {},
  props: {},
  data() {
    //这里存放数据"
    return {
      dialogVisible: false,
      statusOptions: [
        { value: '', text: '全部' },
        { value: '1', text: '未开始' },
        { value: '2', text: '执行中' },
        { value: '3', text: '已暂停' },
        { value: '4', text: '已结束' },
        { value: '5', text: '已撤销' },
      ],
      showSearch: true,
      selectedItems:[],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        licensePlate: null,
        name: null,
        status: null, // 初始化时没有选择任何状态
        createTime:null,
        sort:null,
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      vehiclesList:[],
      form:{},
      vehiclesFormVisible: false,
      timeRange: [], // 用于绑定时间范围选择器
      // 车辆一键布控 表单
      vehicles:{},
    };
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    // 删除按钮点击事件处理函数
    handleDelete(id) {
      // 弹出确认删除的提示框
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确认后执行删除操作
        this.deleteVehicle(id); // 假设这是调用后端API的方法
      }).catch(() => {
        // 取消操作
      });
    },
    // 调用后端API删除车辆的方法
    deleteVehicle(id) {
      deployDelete(id).then(response => {
        this.$message.success("删除成功");
        this.getList()
      })
    },
    handleAddwe() {
      // 点击按钮时显示弹窗
      this.dialogVisible = true;
    },
    confirmSearch() {
      // 点击确定按钮时的逻辑
      // 例如，执行检索并关闭弹窗
      this.dialogVisible = false;
      // 执行检索的代码...
    },
    // 升序排序的逻辑
    sortAsc(direction) {
      this.queryParams.sort = direction;
      this.getList();
    },
    // 降序排序的逻辑
    sortDesc(direction) {
      this.queryParams.sort = direction;
      this.getList();
    },
    getStatusText(statusValue) {
      const statusOption = this.statusOptions.find(option => option.value === statusValue);},
    handleQuery(){
      this.queryParams.pageNum = 1;
      this.getList();
    },
    viewDetails(item) {
      this.vehiclesFormVisible=true;
      this.form=item;
    },
    edit(item) {
      if (item.status === 2) {
        this.$alert('正在执行中，请勿编辑', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.vehiclesFormVisible = false;
          }
        });
        return;
      }
      this.vehiclesFormVisible = true;
      this.form = item;
      this.form.taskType = item.taskType.toString();
      console.log(this.form)
      console.log(item)
    },
    // 停止布控操作
    stop(item) {
      // 使用this.$confirm显示确认提示框
      this.$confirm('是否结束对于车牌'+item.licensePlate+'的布控？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 用户点击确定，执行停止布控的逻辑
        stop(item.id).then(response => {
          if (response.code === 200) { // 根据实际业务需求检查响应码
            this.$modal.msgSuccess("布控已结束");
            this.getList(); // 刷新列表
          } else {
            this.$modal.msgError("操作失败，请重试");
          }
        }).catch(error => {
          console.error('停止布控失败：', error);
          this.$modal.msgError("操作失败，请重试");
        });
      }).catch(() => {
        // 用户点击取消，不执行任何操作
      });
    },
    // 暂停
    suspend(item){
      this.$confirm('是否暂停对车牌'+item.licensePlate+'的布控？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用后台suspend方法
        suspend(item.id).then(response => {
          this.$modal.msgSuccess("暂停成功");
          this.getList();
        })
      })
    },
    // 其他方法...
    start(item) {
      this.$confirm('是否开始对于车牌'+item.licensePlate+'的布控？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用后台suspend方法
        start(item.id).then(response => {
          this.$modal.msgSuccess("暂停成功");
          this.getList();
        })
      })
    },

    withdraw(id) {
      updateStatus(id).then(response => {
        this.$modal.msgSuccess("撤销成功");
        this.getList()
      })
    },
    // 跳转到告警记录页面
    alertLog() {
      this.$router.push({
        path: '/deploy/alarm/index',
        name: 'Alarm'
      })
    },
    handleTimeChange(value) {
      if (value) {
        // 当用户选择了时间范围时，更新vehicles对象
        this.vehicles.startTime = value[0]; // 起始时间
        this.vehicles.endTime = value[1]; // 结束时间
      }
    },
    /** 查询车辆一键布控信息列表 */
    getList() {
      this.loading = true
      getMigration(this.queryParams).then(res=>{
          if (res.code === 200) { // 检查响应码是否为200
            this.vehiclesList = res.rows; // 确保这里赋值的是 response.data
            this.total = res.total; // 假设 response.total 是数组的长度
            this.loading = false;
          } else {
            // 错误处理，例如显示消息给用户
            this.$message.error('加载数据失败');
          }
      })
    },
    reset(){
      this.form = {
            name: '',
            licensePlate: '',
            taskType: '',
            startTime: new Date(),
            endTime: new Date(),
            remark: ''
      };
      this.$refs.form.resetFields(); // 重置表单并清除
    },
    // 新增布控
    handleAdd(){
      this.vehiclesFormVisible=true
      this.reset()
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('community/vehicles/car/export', {
        ...this.queryParams
      }, `population_${new Date().getTime()}.xlsx`)
    },
    // 车辆一键布控 确认
    vehiclestForm() {
      if(this.validateTime()){
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              deployUpdate(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.vehiclesFormVisible = false;
                this.getList();
              });
            } else {
              deployVehicles(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.vehiclesFormVisible = false;
                this.getList();
              });
            }
          }
        })
      }else {
        // 如果时间验证不通过，给出提示
        this.$message.error('开始时间不能大于结束时间');
      }

    },
    // 验证开始时间和结束时间的方法
    validateTime() {
      // 将日期字符串转换为Date对象，以便进行比较
      const startTime = new Date(this.form.startTime);
      const endTime = new Date(this.form.endTime);

      // 比较开始时间和结束时间
      return startTime <= endTime;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.getList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style scoped>
.total-style {
  margin-right: 5px; /* 根据需要调整间距 */
  margin-left: 5px;
  margin-top: -4px;
  /*字体大小*/
  font-size: 30px;
  color: springgreen;
}
.delete-button {
  position: absolute; /* 绝对定位 */
  top: -10px; /* 根据需要调整 */
  right: -10px; /* 根据需要调整 */
  cursor: pointer; /* 鼠标悬停时显示指针手势 */
  color: red; /* 图标颜色 */
  border-radius: 50%; /* 圆形 */
  width: 24px; /* 图标大小 */
  height: 24px; /* 图标大小 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px; /* 图标大小 */
}
.product-content2 {
  position: relative; /* 允许绝对定位的子元素 */
  /* 其他样式... */
}
.status-label {
  position: absolute; /* 绝对定位 */
  top: 60px; /* 根据需要调整 */
  right: 10px; /* 根据需要调整 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px; /* 根据需要调整 */
  height: 50px; /* 根据需要调整 */
  background-color: rgba(169, 169, 169, 0.5); /* 灰色半透明背景 */
  border-radius: 50%; /* 圆形 */
  color: whitesmoke; /* 文本颜色 */
  font-size: 14px; /* 根据需要调整 */
}

.status-circle {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 其他样式... */
}
.sort-container {
  display: flex;
  align-items: flex-start; /* 垂直方向上的开始位置 */
}

.sort-buttons {
  display: flex;
  flex-direction: column; /* 垂直排列按钮 */
  justify-content: space-around; /* 按钮间间隔均匀分布 */
  margin-left: 10px; /* 与文本的间距 */
  margin-top: -6px;
}

.sort-buttons .el-button {
  padding: 0; /* 按钮内边距调整为0 */
  border: none; /* 按钮边框设置为无 */
  background: transparent; /* 按钮背景设置为透明 */
}
.sort-buttons .el-button {
  margin: 2px; /* 按钮之间的间距 */
  border: none; /* 按钮无边框 */
  background: transparent; /* 按钮背景透明 */
}

/* 确保图标垂直居中 */
.sort-buttons .el-icon-caret-top,
.sort-buttons .el-icon-caret-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 在<style>标签中添加 */
.blue-text {
  color: blue;
}
.inline-block-wrapper h4 {
  display: inline-block;
  margin-right: 10px; /* 根据需要调整间距 */
}
.action-box {
  display: flex;          /* 使用Flexbox布局 */
  justify-content: space-around; /* 按钮之间的间距平均分布 */
  width: 510px;          /* 容器宽度 */
  background-color: #4CAF50; /* 绿色背景，您可以根据需要选择不同的绿色 */
  padding: 10px;          /* 内边距 */
  border-radius: 4px;      /* 边框圆角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 轻微的阴影 */
  margin-top: 10px;        /* 与上一个元素的间距 */
}
.action-box {
  background-color: #e6f5c9; /* 浅绿色背景 */
  padding: 10px; /* 内边距 */
  border-radius: 4px; /* 边框圆角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 轻微的阴影 */
}
.light-gray-bg {
  background-color: #f0f0f0; /* 浅灰色背景 */
  transition: background-color 0.3s; /* 背景颜色变化动画 */
}

.product-content2:hover .light-gray-bg {
  background-color: #e0e0e0; /* 鼠标悬浮时更深的灰色 */
}

.action-buttons {
  display: none; /* 默认隐藏 */
  margin-top: 5px; /* 与内容的间距 */
  text-align: center; /* 按钮居中 */
}

/* 鼠标悬浮时显示操作按钮 */
.product-content2:hover .action-buttons {
  display: block;
}
.required-label {
  color: red;
  margin-right: 4px; /* 与文本标签保持一定间隔 */
}
.product-content1 {
  text-align: center; /* 图片和信息居中对齐 */
  margin-bottom: 20px; /* 底部间距 */
}

.product-content1 .fixed-image-eatate-size {
  display: block; /* 确保图片是块级元素 */
  margin: 0 auto 10px auto; /* 图片居中并留下一定的底部间距 */
  max-width: 100%; /* 图片最大宽度为容器宽度 */
  height: 500px; /* 高度自适应，保持比例 */
  width: 500px; /* 固定宽度，可以根据需要调整 */
}

#box {
  display: flex;
  justify-content: center; /* 居中显示 */
}

.population-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none;
}
.product-item {
  width: calc(33.33% - 20px); /* 计算每个项目的宽度，减去外边距 */
  margin: 10px; /* 外边距 */
}

.product-content2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px;
  border: 1px solid #ccc;
  width: 100%; /* 确保每个项目占据父容器的宽度 */
}

.product-content2 .fixed-image-size3 {
  display: block; /* 确保图片是块级元素 */
  margin: 0 auto 10px auto; /* 图片居中并留下一定的底部间距 */
  max-width: 100%; /* 图片最大宽度为容器宽度 */
  height: 200px; /* 高度自适应，保持比例 */
  width: auto; /* 固定宽度，可以根据需要调整 */
}

.info {
  flex: 1; /* 让信息部分占据剩余空间 */
}

.info h4,
.info p {
  margin: 0;
}

.additional-info1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列布局 */
  grid-gap: 10px; /* 设置网格之间的间距 */
}

.additional-info1 p {
  margin: 0;
}
.action-buttons {
  background-color: turquoise;
  display: none; /* 默认隐藏 */
  margin-top: 10px; /* 与内容的间距 */
  text-align: center; /* 按钮居中 */
  padding: 8px; /* 内边距 */
  border-radius: 4px; /* 边框圆角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 轻微的阴影 */
}

</style>
